//条件渲染
import React,{Component} from 'react'
import { Link  ,Outlet} from 'react-router-dom';
function Item({ name, isPacked }) {

	  
    return(
		<li className="item">
		{isPacked ?(
			<del>
				{name+'✔'} 
			</del>
		):(
			<b>
			{name}
			</b>
		)
					
		}
		</li>
		
	); //什么都不渲染的时候返回 null
  
 
}

export default class Condition extends Component {
	render(){
		return (
			<section>
			  <h1>Sally Ride 的行李清单</h1>
			  <ul>
			    <Item 
			      isPacked={true} 
			      name="宇航服" 
			    />
			    <Item 
			      isPacked={true} 
			      name="带金箔的头盔" 
			    />
			    <Item 
			      isPacked={false} 
			      name="Tam 的照片" 
			    />
				</ul>
				<div><Link to='/condition/detail'>查看详情</Link></div>

				<Outlet />
				
			</section>
			
		)
	}
}

